<template>
    <div id="">
        <el-form ref="form"  label-width="80px">
            <el-form-item label="SPU名称">
                {{spu.spuName}}
            </el-form-item>
            <el-form-item label="SKU名称">
                <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格（元）">
                <el-input placeholder="价格（元）" type="number" v-model="skuInfo.price"></el-input>
            </el-form-item>
            <el-form-item label="重量（千克）">
                <el-input placeholder="重量（千克）" v-model="skuInfo.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" ref="form"  label-width="80px">
                    <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
                        <el-select  placeholder="请选择" v-model="attr.attrIdAndValueId">
                            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" ref="form"  label-width="80px">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
                        <el-select  placeholder="请选择" v-model="saleAttr.saleAttrIdAndValueId">
                            <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table   style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" prop="prop"  width="80">
                    </el-table-column>
                    <el-table-column prop="prop" label="图片"  width="width">
                        <template slot-scope="{row,$index}">
                            <img :src="row.imgUrl" style="width:100px;heigth:100px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgName" label="名称"  width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作"  width="width">
                        <template slot-scope="{row,$index}">
                            <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设为默认</el-button>
                            <el-button v-else>默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script >
export default {
    name: "",
    data() {
        return {
            spuImageList:[],  //存储图片的信息
            spuSaleAttrList:[], //存储销售属性
            attrInfoList:[],  //存储平台属性
            skuInfo:{    //收集sku数据的字段
              //第一类收集的数据：父组件给的数据
              category3Id:0,
              spuId:0,
              tmId:0,
              //第二类：需要通过数据双向绑定v-model收集
              skuName:" ",
              price:0,
              weigth:" ",
              skuDesc:" ",
              //第三类数据：需要自己书写代码
              //收集平台属性
              skuAttrValueList:[],
              //默认图片
              skuDefaultImg:" ",
              //收集图片的字段
              skuImageList:[
                {
                    attrId:0,
                    valueId:0
                }
              ],
              //收集销售属性的列表的
              skuSaleAttrValueList:[],
              

            } ,   
            spu:{},
            //收集图片的数据字段  但是需要注意 目前收集的数据当中，缺少isDefault字段
            imageList:[]

        }
    },
    components: {},
    methods: {
        //获取sku的数据
        async getData(category1Id,category2Id,spu){
            //收集父组件给予的数据
            this.skuInfo.category3Id=spu.category3Id
            this.skuInfo.spuId = spu.id
            this.skuInfo.tmId = spu.tmId
            this.spu= spu
            //获取图片数据
            let result = await this.$API.sku.reqSpuImageList(spu.id)      
            if(result.code==200){
                let list = result.data
                list.forEach(item=>{
                    item.isDefault = 0
                })
                this.spuImageList=list    
            }
            //获取销售属性的数据
            let result1 = await this.$API.sku.reqSpuSaleAttrList(spu.id)
            if(result1.code==200){
                this.spuSaleAttrList=result1.data       
            }
            //console.log(category1Id)
            //获取平台属性的数据
            let result2 = await this.$API.sku.reqAttrInfoList(category1Id,category2Id,spu.category3Id)
            // console.log(result2)
            if(result2.code==200){
                this.attrInfoList=result2.data       
            }
        },
        //table表格复选框按钮的事件
        handleSelectionChange(params){
            //获取到用户选中图片的信息数据 但是需要注意 目前收集的数据当中，缺少isDefault字段
            this.imageList = params
        },
        //设置默认图片按钮的排他操作
        changeDefault(row){
              //图片列表的数据默认字段为0
              this.spuImageList.forEach(item=>{
                item.isDefault = 0
              })
              //点击的那个图片的数据isDefault为1
              row.isDefault = 1
              //收集默认图片的地址
              this.skuInfo.skuDefaultImg = row.imgUrl
        },
        //取消按钮的回调
        cancel(){
            //自定义事件，让父组件切换场景0
            this.$emit('changeScenes',0)
            //清除数据
            Object.assign(this._data,this.$options.data())
        },
        //点击保存的回调
        async save(){
            //整理参数
            const {attrInfoList,skuInfo,spuSaleAttrList,imageList} = this
            //新建数组
            // let arr=[]
            // //把收集到的数据整理一下
            // attrInfoList.forEach(item=>{
            //     //当前平台属性用户进行选择
            //     if(item.attrIdAndValueId){
            //         const[attrId,valueId] = item.attrIdAndValueId.split(":")
            //         //携带给服务器参数应该是对象
            //         let obj={valueId,attrId}
            //         arr.push(obj)
            //     }
            // })
            //将整理好的参数赋值给skuInfo.skuAttrValueList
            //skuInfo.skuAttrValueList=arr
            //整理平台属性
             skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
                if(item.attrIdAndValueId){
                    const[attrId,valueId] = item.attrIdAndValueId.split(":")
                    prev.push({attrId,valueId})
                }
                return prev
             },[])
             //整理销售属性
             skuInfo.skuSaleAttrValueList=spuSaleAttrList.reduce((prev,item)=>{
                  if(item.attrIdAndValueId){
                    const[saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(":")
                    prev.push({saleAttrId,saleAttrValueId})
                  }
                  return prev
             },[])
             //整理图片数据
             skuInfo.skuImageList=imageList.map(item=>{
                return{
                    imgName:item.imgName,
                    imgUrl:item.imgUrl,
                    isDefault:item.isDefault,
                    spuImgId:item.id
                }
             })
             //发请求
             let result = await this.$API.spu.reqAddSku(skuInfo)
             console.log(skuInfo)
             console.log(result)
             if(result.code==200){
                  //提示信息
                  this.$message({type:'success',message:'添加sku成功'})
                   //自定义事件，让父组件切换场景0
                  this.$emit('changeScenes',0)
             }
             
        }
    }
}
</script>

<style >

</style>
